import React from 'react'
import TextareaAutosize from 'react-textarea-autosize'
import {FormGroupLabel} from '../FormGroupLabel'

interface TextAreaProps {
  id?: string
  name: string
  label?: string
  value: string
  valid?: boolean
  invalid?: boolean
  feedback?: React.ReactElement | string
  required?: boolean
  disabled?: boolean
  onChange: (value: any) => any
  placeholder?: string
  className?: string
  helpText?: React.ReactNode
  size?: 'sm' | 'lg'
}

const TextArea: React.FC<TextAreaProps> = ({
  onChange,
  helpText,
  value,
  className,
  placeholder,
  required,
  name,
  label,
  disabled,
  size,
  feedback,
  valid,
  invalid,
  id,
}): React.ReactElement => {
  return (
    <FormGroupLabel
      feedback={feedback}
      helpText={helpText}
      isRequired={required}
      className={className}
      label={label}
      invalid={invalid}
      valid={valid}>
      <TextareaAutosize
        id={id}
        name={name}
        value={value ?? ''}
        className={
          'textarea custom-scroll ' +
          (size ? size : 'lg') +
          (valid ? 'valid ' : '') +
          (invalid ? 'invalid' : '')
        }
        required={required}
        disabled={disabled}
        onChange={(evt: any) => {
          onChange(evt.target.value)
        }}
        placeholder={placeholder}
      />
    </FormGroupLabel>
  )
}

export {TextArea}
